<template>
    <div>
        <ul>
            <li v-for="(v,i) in messages" :key="i">
                <div class="z">
                    <div class="a">
                        <span>{{v.creatorid}}</span>
                        <el-button class="delete" size="small" type="danger" @click="Delete(v)">删除</el-button>
                    </div>
                    <div class="b">
                        <span class="c">{{v.content}}</span>
                        <span class="t">{{v.time}}</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>


          <!-- 编辑弹出框 -->
          <el-dialog
          v-model="centerDialogVisible"
          title="留言"
          width="45%"
          align-center
        >
          <el-form :model="addForm" :rules="rules" ref="form" label-width="120px">
          <el-form-item label="内容" prop="content">
            <el-input v-model="addForm.content" 
            placeholder="请写下您的留言"/>
          </el-form-item>
          </el-form>
          <el-form-item>
            <el-button type="primary" @click="message()">确定</el-button>
            <el-button @click="centerDialogVisible = false">取消</el-button>
          </el-form-item>
        </el-dialog>

    
    <div class="pagination-container">
        <el-pagination
        class="pagination"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total,prev,pager,next,jumper"
        :total="pagination.total"
        ></el-pagination>
      </div>

      <div class="d">
        <el-button type="success" @click="centerDialogVisible = true">留言</el-button>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')

const centerDialogVisible = ref(false)
</script>


<script>
import { getApi,postApi,deleteApi,updateApi} from '@/util/api'
    export default {
        data() {
            return {
              messages: [],
              pagination:{//分页
              currentPage:1,//当前页码
              pageSize:3,//一页多少条
              total:0
            },
              addForm:{
                content:'',
              },//表单数据
            rules:{
                content:[
                     { required: true, message: "请输入内容", trigger: "blur" },
                ]
            }
            }
        },
        created(){
        this.getAll();
        },
        methods:{
     //分页
     getAll(){
        getApi("workers/messages/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((rs)=>{
              this.pagination.pageSize = rs.data.data.size;
              this.pagination.currentPage = rs.data.data.current;
              this.pagination.total = rs.data.data.total;
              this.messages=rs.data.data.records;
              }).catch(error=>{
                  alert(error);
              })
            },
            handleCurrentChange(currentPage){
            //修改页码值为当前选中页码值
            this.pagination.currentPage = currentPage;
            //执行查询
            this.getAll();
            },

            //留言
            message(){
                               this.$refs['form'].validate((valid)=>{
                if(valid){
                            postApi("workers/messages/",{
                            content: this.addForm.content,
                        }).then((res)=>{
                        //判断当前操作是否成功
                        if(res.data.data){
                            this.centerDialogVisible=false;
                            this.$msg.success("留言成功");
                        } else{
                            this.$msg.error("留言失败");
                        }               
                        }).finally(()=>{
                            this.getAll();
                            this.addForm={}
                        })
                    }
                    else{
                        return false;
                    }
                })
            },

            //删除留言
            Delete(v){
                this.$confirm("此操作永久删除当前留言，是否继续？","提示",{
          type:'info',
        confirmButtonText:"确定",
          cancelButtonText:"取消"
        }).then(()=>{
          deleteApi("workers/messages/"+v.mid).then((res)=>{
        if(res.data.code==1){
            this.$message.success("删除成功");

        }else{
            this.$message.error("删除失败,不能删除非自己的留言！");
        }
        }).finally(()=>{
          this.getAll();
        });
        }).catch(()=>{
          this.$message.info("取消删除操作");
        });
            }
    }
}
</script>

<style lang="scss" scoped>

.z{
    margin-top: 10px;
    width: 100%;
    height: 100px;
    background-color: #fff;
    .a{
        position: relative;
        background-color: rgb(148,211,242);
        height: 30px;
        span{
            position: absolute;
            color: #fff;
            font-size: 20px;
            margin-top: 2px;
            margin-left: 5px;
        }
        .delete{
            position: absolute;
            margin-top: 2px;
            right: 10px;
        }
    }
    .b{
        position: relative;
        .c{
            position: absolute;
            font-size: 26px;
            margin-top: 13px;
            margin-left: 25px;
        }
        .t{
            position: absolute;
            margin-top: 40px;
            right: 10px;
        }
    }
}

.d{
    text-align: center;
    margin-top: 80px;
    .el-button--success{
        width: 300px;
        height: 100px;
        font-size: 60px;

    }
}

.pagination-container{
    position: absolute;
    right: 70px;
    margin-top: 10px;
  }
</style>